import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import qs from "qs";
import axios from "axios";
const Index: React.FC = () => {
  // 解析地址栏查询参数
  const location = useLocation();
  const { out_trade_no } = qs.parse(location.search.slice(1));
  const [status, setStatus] = useState({ type: "", mes: "" });
  const query = async () => {
    const resp = await axios.get("/api/pay/query", {
      params: { out_trade_no },
    });
		console.log(resp.data.data)
    switch (resp.data.data.tradeStatus) {
      case "WAIT_BUYER_PAY": {
        setStatus({
          type: resp.data.data.tradeStatus,
          mes: "交易创建，等待买家付款",
        });
        return;
      }
      case "TRADE_CLOSED": {
        setStatus({
          type: resp.data.data.tradeStatus,
          mes: "未付款交易超时关闭，或支付完成后全额退款",
        });
        return;
      }
      case "TRADE_SUCCESS": {
        setStatus({ type: resp.data.data.tradeStatus, mes: "交易支付成功" });
        return;
      }
      case "TRADE_FINISHED": {
        setStatus({
          type: resp.data.data.tradeStatus,
          mes: "交易结束，不可退款",
        });
        return;
      }
    }
  };

  useEffect(() => {
    query();
  }, []);
  if (status.type === "") return <div>结果查询中...</div>;

  return (
    <div>
      状态: {status.type}---含义： {status.mes}
    </div>
  );
};

export default Index;
